import XtxSkeleton from '@/components/skeleton/index.vue'
import Xtxcarsouel from '@/components/carsouel/index.vue'
// import Xtxmore from '@/components/more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImage from '@/assets/images/200.png'
import bread from '@/components/bread/index.vue'
import breaditem from '@/components/bread/item.vue'
import city from '@/components/city/index.vue'
import Xtxnumbox from '@/components/numbox/index.vue'
import Xtxbutton from '@/components/button/index.vue'
import Xtxcheckbox from '@/components/checkbox/index.vue'
import { App } from 'vue'
export default {
  install(app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component('Xtxcarsouel', Xtxcarsouel)
    // app.component('Xtxmore', Xtxmore)
    app.component('bread', bread)
    app.component('breaditem', breaditem)
    app.component('city', city)
    app.component('Xtxnumbox', Xtxnumbox)
    app.component('Xtxbutton', Xtxbutton)
    app.component('Xtxcheckbox', Xtxcheckbox)
    // 全局注册指令
    // 参数1: 指令名
    // 参数2: 配置项
    app.directive('lazy', {
      // Vue2: 当绑定的元素插入到 DOM 中时执行, inserted
      // inserted(el, binding) {}
      // Vue3: 改为了 mounted
      mounted(el, binding) {
        // el: 当前指令绑定的 DOM 元素
        // console.log(el, binding)
        // 逻辑: 当 el 进入可视区后, 给它设置 src 属性
        useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
          }
        })
        el.onerror = function(){
          el.src = defaultImage
        }
      }
    })
  },
}